<template>
  <!-- 流程设置 -->
  <Card style="height:800px">
    <header>
      <span>流程节点:</span>
      <Select  style="width:200px"  v-model="nodeCode">
        <Option v-for="item in nodeCodesData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="margin:0px 0px 0px 20px">意见分类:</span>
      <Select v-model="opinionClass" style="width:200px">
        <Option v-for="item in opinionClasssData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" @click="initPage" style="margin:0px 0px 0px 20px;width: 90px">查询</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table  border :columns="tableColumns" :data="tableDatas"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="totalPage" :current="currentPage" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="handlePageChange" @on-page-size-change="sizeChange"></Page>
    </div>
  </Card>
</template>

<script>
export default {

  data () {
    return {
      tableColumns: [
        {
          type: 'index',
          title: '序号'
        },
        {
          title: '类型代码',
          key: 'opinion_type_code'
        },
        {
          title: '类型名称',
          key: 'opinion_type_name'
        },
        {
          title: '类型APP名称',
          key: 'opinion_type_app'
        },
        {
          title: '分类',
          key: 'opinion_class'
        },
        {
          title: '类型级别',
          key: 'opinion_level'
        },
        {
          title: '父类型',
          key: 'opinion_sup_code'
        },
        {
          title: '所属节点代码',
          key: 'node_code'
        },
        {
          title: '所属节点名称',
          key: 'node_name'
        },
        {
          title: '最近更新人',
          key: 'update_by'
        },
        {
          title: '最近更新时间',
          key: 'updated_date'
        }
        /**
          {
            title: '操作',
            render: function ( h ,param) {
              const vm = this;
              return h( 'div', {}, [
                h( 'Button', {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    fontSize: '12px'
                  },
                  on: {
                    click: () => {
                      vm.handleRouterGo( 'opinion_type_add',param.row.act_key );
                    }
                  },
                }, '查看' )
              ] );
            }
          }, */
      ],
      tableDatas: [ ],
      nodeCodesData: [ ],
      opinionClasssData: [
        {
          value: null,
          label: '请选择'
        },
        {
          value: 0,
          label: '拒绝'
        },
        {
          value: 1,
          label: '违例'
        }
      ],
      nodeCode: null,
      opinionClass: null,
      totalPage: 0,
      currentPage: 1,
      pageSize: 12
    }
  },
  methods: {
    handlePageChange: function (pageNum) {
      var vm = this
      vm.currentPage = pageNum
      vm.initPage()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.initPage()
    },
    handleRouterGo (toPage, actKey) {
      if (actKey != null) {
        this.$router.push({ name: toPage, params: { actKey: actKey } })
      } else {
        this.$Message.warning('参数为空')
      }
    },
    addPage () {
      this.$router.push({ name: 'opinion_type_add', params: {} })// 类似post传参
    },
    initPage (goPage) {
      var vm = this

      var params = {}
      params.nodeCode = this.nodeCode
      params.opinionClass = this.opinionClass
      params.pageNum = vm.currentPage
      params.pageSize = vm.pageSize
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/opinion_type/service/list', params).then(re => {
        this.totalPage = re.data.data.total
        this.tableDatas = []
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.node_name = item.nodeName
          tData.node_code = item.nodeCode
          tData.opinion_type_code = item.opinionTypeCode
          tData.opinion_type_name = item.opinionTypeName
          tData.opinion_type_app = item.opinionTypeApp
          if (item.opinionClass === 0) {
            tData.opinion_class = '拒绝'
          } else {
            tData.opinion_class = '违例'
          }
          tData.opinion_level = item.opinionLevel
          tData.opinion_sup_code = item.opinionSupCode
          tData.update_by = item.updatedBy
          tData.updated_date = this.$util.formatTime(new Date(item.updatedDate))
          this.tableDatas.push(tData)
        })
      }).catch(er => {
      })
    },
    // 加载流程节点下拉框
    initFlowCode () {
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/flow_node/service/nlist', {}).then(re => {
        this.nodeCodesData = []
        var fData = {}
        fData.label = '请选择'
        fData.value = ''
        this.nodeCodesData.push(fData)
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.label = item.nodeName
          tData.value = item.nodeCode
          this.nodeCodesData.push(tData)
        })
      }).catch(er => {
      })
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.initFlowCode()
    this.initPage()
  }
}
</script>

<style lang="less">

</style>
